<script setup>
const props = defineProps({
  userId: {
    type: Number,
    required: true,
  },
})
const $emit = defineEmits(['switchTab', 'switchAttentionTab'])
console.log('右侧加载', props.userId)
// 跳转 关注标签 的子标签 = 需要先打开关注标签页在 修改激活tab id
async function toggleAttentionTag(i) {
  await $emit('switchTab', 'attention')
  $emit('switchAttentionTab', i)
}
</script>

<template>
  <AppCard bordered class="h-70 flex border-rd-5 us">
    <div
      class="flex-col flex-1 items-center justify-center cursor-pointer-text-hover"
      @click="toggleAttentionTag(0)"
    >
      <span>关注了</span>
      <span class="fw-550">2</span>
    </div>
    <div
      class="flex-col flex-1 items-center justify-center cursor-pointer-text-hover"
      @click="toggleAttentionTag(1)"
    >
      <span>关注者</span>
      <span class="fw-550">5</span>
    </div>
  </AppCard>
  <div class="mt-10 flex-col p-8 us">
    <el-divider class="op-50 us" />
    <div
      class="flex justify-between px-5 cursor-pointer-text-hover"
      @click="$emit('switchTab', 'collect')"
    >
      <span>收藏集</span>
      <span>5</span>
    </div>
    <el-divider class="op-50 us" />
    <div
      class="flex justify-between px-5 cursor-pointer-text-hover"
      @click="toggleAttentionTag(2)"
    >
      <span>关注标签</span>
      <span>0</span>
    </div>
    <el-divider class="op-50 us" />
    <div class="flex justify-between px-5">
      <span>加入于</span>
      <span>2024-12-02</span>
    </div>
    <el-divider class="op-50 us" />
  </div>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
}
</style>
